<template>
	<view>
		<uni-search-bar @cancel="search" @confirm="search" clearButton="always" cancelButton="always" cancelText="搜索" placeholder="请输入您想查询的商品" v-model="searchValue"></uni-search-bar>
		<view class="mx-2 mt-4" style="position:relative;">
			<view class="font-md font-weight-bold">搜索历史</view>
			<text @click="clear" class="font-sm text-muted" style="position: absolute; right: 0; top: 10rpx;">清空</text>
			<view class="flex flex-wrap py-2">
				<view @click="GoGood(index)" class="flex justify-center py-2 mb-2 rounded-circle font-sm" v-for="(item,index) in history" :key="index"
					style="width: 22%; background-color: #F6F7F8;" :style="{marginRight:(index+1)%4==0?'':'4%'}">
					<text class="text-ellipsis text-center" style="width: 85%;">{{item}}</text> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:'',
				history: [],
			}
		},
		onShow(){
			let value = uni.getStorageSync('searchValue');
			if(value){
				this.history = value;
			}
		},
		methods: {
			search(){
				if (this.searchValue == '') {
					uni.showToast({title: '请输入您要查询的关键字',icon:"none"})
				} else {
					this.history = this.history.filter(i=>i!=this.searchValue);
					this.history.unshift(this.searchValue);
					if(this.history.length>16){
						this.history.pop();
					}
					uni.setStorageSync('searchValue', this.history);
					uni.navigateTo({
						url: "/pages/index/searchGoods?value=" + this.searchValue
					})
				}
			},
			clear() {
				uni.removeStorageSync('searchValue')
				this.history=[];
			},
			GoGood(index){
				this.history.unshift(this.history[index]);
				this.history.splice(index+1,1);
				uni.setStorageSync('searchValue', this.history);
				uni.navigateTo({
					url: "/pages/index/searchGoods?value=" + this.history[0]
				})
			}
		}
	}
</script>
<style>
</style>